<!--
 * @Description: 意见转发。包含意见和附言
-->
<template>
  <div id="opinion-turn-area" v-if="list.length" v-watermark>
    <div id="opinion-turn-title">
      <a-button @click="isShow = !isShow">
        {{ isShow ? $i18n('common.display.hidden.label') : $i18n('common.operate.view')
        }}{{ $i18n('collaboration.colPrint.oldOpinion') }}
      </a-button>
    </div>
    <ul v-show="isShow">
      <li v-for="(item, index) in list" :key="index">
        <div class="turn-number">
          {{ $i18n('collaboration.forward.oriOp.level.label', item.forwardNum) }}
        </div>
        <OpinionTurnItem :data="item" />
      </li>
    </ul>
    <a-spin v-show="isShow" v-if="hasNextPage" :spinning="spinning">
      <div class="comment-load-more" @click="getData">
        {{ $i18n('cap4.form.business.loadmore') }}
      </div>
    </a-spin>
  </div>
</template>
<script>
  //引入每一次转发组件
  import OpinionTurnItem from './components/item';
  // 引入基础数据
  import { useBaseInfoStore } from '@/store/modules/base-info.js';
  import { mapState } from 'pinia';
  import api from '@/api';

  export default {
    name: 'OpinionTurnArea',
    components: { OpinionTurnItem },
    data() {
      return {
        //是否有下一页
        hasNextPage: false,
        //显示页的起始记录数的偏移量
        offset: 1,
        //展示列表
        list: [],
        //隐藏展示
        isShow: true,
        //加载中
        spinning: false
      };
    },
    computed: {
      ...mapState(useBaseInfoStore, ['baseInfo', 'print'])
    },
    created() {
      this.$root.$once('dataReady', this.getData);
    },
    methods: {
      //获取所有数据
      async getData() {
        this.spinning = true;
        const { moduleId, moduleType } = this.baseInfo.zwIframe.mainbody;
        try {
          const { commentData, hasNextPage } = await api.commentGetList({
            moduleId,
            affairId: this.baseInfo.businessData.affair.id,
            moduleType,
            offset: this.offset,
            limit: 10,
            queryType: 1
          });
          this.addData(commentData);
          //有下一页，页数+1
          if ((this.hasNextPage = hasNextPage)) {
            this.offset++;
          }
        } finally {
          this.spinning = false;
        }
      },
      /**
       * @description: 添加分页数据到相应位置
       * @param {Array}commentData 当前分页请求到的数据
       * @return {*}
       */
      addData(commentData) {
        commentData.forEach((d) => {
          //获取当前索引
          const index = d.forwardNum - 1;
          //如果已经有这个大块了，就把里面评论添加进去
          if (this.list[index]) {
            this.list[index].comments.push(...d.comments);
          } else {
            //否则添加整个大块
            this.list.push(d);
          }
        });

        //更新打印数据
        this.print.turnCommentData = this.list;
      }
    }
  };
</script>
<style lang="scss">
  .comment-load-more {
    @include height(40);

    text-align: center;
    cursor: pointer;
    border-top: $border;

    &:hover {
      color: $primary-color;
    }
  }
</style>
<style lang="scss" scoped>
  #opinion-turn-area {
    margin: 20px 20px 60px;
    border: $border;

    > #opinion-turn-title {
      padding: 10px;
      text-align: right;
      background-color: #f3feed;
    }

    > ul {
      margin-bottom: 20px;

      > li {
        margin-top: 20px;

        > .turn-number {
          @include fb(18);

          margin-left: 20px;
        }
      }
    }
  }
</style>
